/* ==========================================
   CONTACT PAGE - Exact Layout (ft-contact)
   Works with your current template markup
   ========================================== */

.ft-contact, .ft-contact * { box-sizing: border-box; }
.ft-contact{
  font-family: "Cairo", sans-serif;
  direction: rtl;
  padding: 40px 0 60px;
}

/* ===== Top: Title + 3 Cards ===== */
.ft-contact__top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:64px;
  text-align:center;
}

.ft-contact__title{
  margin:0;
  font-size:32px;
  line-height:36px;
  font-weight:800;
  color:#07334e;
}

/* Cards row */
.ft-contact__cards{
  width:100%;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:48px;
  flex-wrap:nowrap;
}

/* Card */
.ft-cbox{
  width:345px;
  height:324px;
  border-radius:10px;
  background:#fff;
  border:2px solid #1076b4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:32px 32px;
  text-align:center;
}

.ft-cbox__circle{
  width:100px;
  height:100px;
  border-radius:50px;
  background:#1076b4;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  margin-bottom:24px;
}
.ft-cbox__circle img{
  width:60px;
  height:60px;
  object-fit:contain;
}

.ft-cbox__h{
  font-size:24px;
  line-height:36px;
  font-weight:800;
  color:#000;
  margin-bottom:12px;
}

.ft-cbox__v{
  font-size:18px;
  line-height:28px;
  font-weight:600;
  color:#646464;
  text-align:center;  /* زي التصميم */
}
.ft-cbox__v a{
  color:#646464;
  text-decoration:none;
}
.ft-cbox__v a:hover{ text-decoration:underline; }

/* Phones list inside card */
.ft-cbox__phones{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}
.ft-cbox__phone{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center; /* وسط زي الصورة */
  gap:12px;
}
.ft-cbox__num{
  font-size:18px;
  line-height:28px;
  font-weight:600;
  color:#646464;
}
.ft-cbox__picon{
  width:28px;
  height:28px;
  object-fit:contain;
}

/* ===== Bottom: Form + Map side by side ===== */
.ft-contact__bottom{
  margin-top:40px;
  width:100%;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:20px;
}

/* Form box exact */
.ft-contact__formbox{
  width:785px;
  min-height:550px;
  border-radius:10px;
  background:#fff;
  border:3px solid #40aba7;
  padding:24px 35px;
  display:flex;
  align-items:center;
  height:100px;
}

/* form wrapper */
.ft-form{ width:100%; }

/* notices */
.ft-form__notice{
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:8px;
  text-align:center;
  font-weight:800;
}
.ft-form__notice--ok{ background:#e7fff3; color:#0a7a3a; }
.ft-form__notice--err{ background:#fff0f0; color:#b00020; }

/* fields */
.ft-form__field{ margin-bottom:12px; }

.ft-form__label{
  display:block;
  text-align:right;
  font-size:20px;
  line-height:36px;
  font-weight:700;
  color:#646464;
  margin-bottom:4px;
}

.ft-form__input,
.ft-form__textarea{
  width:100%;
  border-radius:5px;
  border:1px solid rgba(100, 100, 100, 0.5);
  padding:10px 12px;
  font-size:16px;
  color:#333;
  outline:none;
  background:#fff;
}

.ft-form__textarea{
  min-height:201px;
  resize:vertical;
}

/* submit */
.ft-form__submit{
  width:100%;
  height:56px;
  border:0;
  border-radius:10px;
  cursor:pointer;
  color:#fff;
  font-size:18px;
  font-weight:800;
  background: linear-gradient(85.19deg, #1076b4, #40aba7);
}
.ft-form__submit:hover{ opacity:.92; }

/* Map box exact */
.ft-contact__mapbox{
  width:555px;
  min-height:720px;
  border-radius:10px;
  padding:15px 11px;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:top;
  overflow:hidden;
  display:flex;
}

.ft-contact__mapinner{
  width:100%;
  border-radius:10px;
  overflow:hidden;
  background: rgba(255,255,255,.9);
}

.ft-contact__mapinner iframe{
  width:100% !important;
  height:100% !important;
  min-height:690px;
  border:0 !important;
  display:block;
}

.ft-contact__note{
  padding:14px;
  text-align:center;
  color:#666;
}

/* ===== Responsive (Mobile like your screenshot) ===== */
@media (max-width: 1024px){
  /* allow wrap if screen is smaller than full fixed widths */
  .ft-contact__cards{ flex-wrap:wrap; }
  .ft-contact__bottom{ flex-wrap:wrap; }
}

@media (max-width: 768px){
  .ft-contact{ padding:24px 0 40px; }

  .ft-contact__top{ gap:22px; }
  .ft-contact__title{
    font-size:22px;
    line-height:1.4;
    padding:0 14px;
  }

  .ft-contact__cards{
    flex-direction:column;
    gap:14px;
    padding:0 14px;
  }
  .ft-cbox{
    width:100%;
    height:auto;
    padding:18px 14px;
  }
  .ft-cbox__h{ font-size:18px; }
  .ft-cbox__v, .ft-cbox__num{ font-size:16px; }

  .ft-contact__bottom{
    flex-direction:column;
    gap:14px;
    padding:0 14px;
  }

  .ft-contact__formbox{
    width:100%;
    min-height:auto;
    padding:18px 14px;
  }

  .ft-contact__mapbox{
    width:100%;
    min-height:320px;
    padding:10px;
  }

  .ft-contact__mapinner iframe{
    min-height:280px;
  }
}



/* ==========================================
   CONTACT - Bottom (Form + Map) EXACT
   Targets: .ft-contact__bottom, __formbox, __mapbox
   ========================================== */

.ft-contact__bottom{
  width:100%;
  display:flex;
  align-items:stretch;
  justify-content:space-between;   /* زي التصميم */
  gap:20px;
  text-align:right;
  font-size:20px;
  color:#646464;
}

/* ===== Form box (785 x 720) ===== */
.ft-contact__formbox{
  width:785px;
  min-height:720px;
  border-radius:10px;
  background:#fff;
  border:3px solid #40aba7;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 35px;
}

/* داخل الفورم */
.ft-form{ width:100%; }
.ft-form__form{ width:100%; }

/* كل حقل */
.ft-form__field{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-end; /* RTL */
  gap:4px;
  margin-bottom:12px;
}

.ft-form__label{
  width:100%;
  font-size:20px;
  line-height:36px;
  font-weight:700;
  color:#646464;
  text-align:right;
}

/* input wrappers نفس شكل locofy */
.ft-form__input,
.ft-form__textarea{
  width:100%;
  border-radius:5px;
  border:1px solid rgba(100,100,100,0.5);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  gap:20px;
  font-size:16px;
  color:#333;
  background:#fff;
  outline:none;
  box-sizing:border-box;
}

.ft-form__textarea{
  min-height:201px;
  align-items:flex-start;
  justify-content:flex-end;
  resize:vertical;
}

/* زر الإرسال */
.ft-form__submit{
  width:100%;
  height:56px;
  border-radius:10px;
  border:0;
  background: linear-gradient(85.19deg, #1076b4, #40aba7);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  color:#fff;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
}
.ft-form__submit:hover{ opacity:.92; }

/* رسائل النجاح/الخطأ */
.ft-form__notice{
  width:100%;
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:8px;
  text-align:center;
  font-weight:800;
}
.ft-form__notice--ok{ background:#e7fff3; color:#0a7a3a; }
.ft-form__notice--err{ background:#fff0f0; color:#b00020; }


/* ===== Map box (555 x 720) ===== */
.ft-contact__mapbox{
  width:555px;
  min-height:720px;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  padding:15px 11px;
  box-sizing:border-box;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:top;
  font-size:16px;
  color:#1e1e1e;
  overflow:hidden;
}

/* بادي الخريطة */
.ft-contact__mapinner{
  width:100%;
  height:100%;
  border-radius:10px;
  overflow:hidden;
  background: rgba(255,255,255,0.9);
}

/* iframe */
.ft-contact__mapinner iframe{
  width:100% !important;
  height:100% !important;
  min-height:690px;
  border:0 !important;
  display:block;
}

/* ===== Mobile (زي الاسكرين: الفورم فوق والخريطة تحت) ===== */
@media (max-width: 768px){
  .ft-contact__bottom{
    flex-direction:column;
    justify-content:flex-start;
    gap:14px;
    padding:0 14px;
  }

  .ft-contact__formbox{
    width:100%;
    min-height:auto;
    padding:18px 14px;
  }

  .ft-contact__mapbox{
    width:100%;
    min-height:320px;
    padding:10px;
  }

  .ft-contact__mapinner iframe{
    min-height:280px;
  }
}

/* ===== FIX: Bottom layout EXACT like design ===== */

/* لازم الكونتينر يبقى واسع كفاية */
.ft-contact .container{
  max-width: 1360px;
}

/* صف الفورم + الخريطة */
.ft-contact__bottom{
  display:flex !important;
  align-items:stretch !important;
  justify-content:center !important;  /* مهم */
  gap:20px !important;                /* المسافة الصغيرة */
  flex-wrap:nowrap !important;        /* يمنع التكسير */
  direction:ltr;                      /* ده سر ترتيب: فورم يسار + خريطة يمين */
}

/* خليه ltr للترتيب بس رجع النص RTL داخل كل صندوق */
.ft-contact__formbox,
.ft-contact__mapbox{
  direction:rtl;
}

/* مقاسات ثابتة زي الفيجما */
.ft-contact__formbox{
  width:785px !important;
  min-width:785px !important;
  flex:0 0 785px !important;
}

.ft-contact__mapbox{
  width:555px !important;
  min-width:555px !important;
  flex:0 0 555px !important;
}

/* iframe ياخد البوكس كله */
.ft-contact__mapinner,
.ft-contact__mapinner iframe{
  width:100% !important;
  height:100% !important;
}

/* ===== Mobile ===== */
@media (max-width: 768px){
  .ft-contact__bottom{
    direction:rtl !important;
    flex-wrap:wrap !important;
  }
  .ft-contact__formbox,
  .ft-contact__mapbox{
    width:100% !important;
    min-width:0 !important;
    flex:auto !important;
  }
  
}


/* =========================
   MOBILE FIX - Contact Bottom
   ========================= */

@media (max-width: 768px){

  /* الصفحة عامة */
  .ft-contact{
    padding: 18px 0 40px;
  }

  /* توب (لو عايزة) */
  .ft-contact__top{
    gap: 18px !important;
  }
  .ft-contact__title{
    font-size: 20px !important;
    line-height: 1.5 !important;
    padding: 0 14px !important;
  }

  /* الكونتينر */
  .ft-contact .container{
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* الجزء السفلي: خليهم تحت بعض */
  .ft-contact__bottom{
    direction: rtl !important;       /* رجّع RTL عادي */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
  }

  /* الفورم بوكس */
  .ft-contact__formbox{
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    min-height: auto !important;
    padding: 16px 14px !important;
    border-radius: 10px !important;
  }

  /* اللابلز */
  .ft-form__label{
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 6px !important;
  }

  /* inputs */
  .ft-form__input{
    font-size: 14px !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
  }

  /* textarea */
  .ft-form__textarea{
    font-size: 14px !important;
    padding: 10px 12px !important;
    min-height: 140px !important; /* أقصر على الموبايل */
    border-radius: 6px !important;
  }

  /* زر الإرسال */
  .ft-form__submit{
    height: 52px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }

  /* الخريطة */
  .ft-contact__mapbox{
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    min-height: 320px !important;
    padding: 10px !important;
    border-radius: 10px !important;
  }

  .ft-contact__mapinner{
    border-radius: 10px !important;
    height: 320px !important; /* ثبتي طول الخريطة */
    overflow: hidden !important;
  }

  .ft-contact__mapinner iframe{
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    display: block !important;
    border: 0 !important;
  }

  /* لو فيه أي styles بتعمل zoom/overflow */
  .ft-contact__mapbox,
  .ft-contact__mapinner{
    max-width: 100% !important;
  }
}


/* ==========================================
   HARD RESET for Contact page (MOBILE)
   Fix: inputs stretching outside, broken boxes
   ========================================== */
@media (max-width: 768px){

  /* امنع أي عناصر تطلع برا الشاشة */
  html, body{ overflow-x:hidden !important; }
  .ft-contact{ overflow-x:hidden !important; }

  .ft-contact .container{
    max-width:100% !important;
    width:100% !important;
    padding-left:14px !important;
    padding-right:14px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* ===== Cards Top (لو بتتكسر) ===== */
  .ft-contact__cards{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
  }
  .ft-cbox{
    width:100% !important;
    height:auto !important;
    padding:18px 14px !important;
  }

  /* ===== Bottom stack ===== */
  .ft-contact__bottom{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:14px !important;
    flex-wrap:nowrap !important;
    direction:rtl !important;
  }

  /* force boxes full width */
  .ft-contact__formbox,
  .ft-contact__mapbox{
    width:100% !important;
    min-width:0 !important;
    flex: none !important;
    max-width:100% !important;
  }

  .ft-contact__formbox{
    min-height:540px !important;
    padding:16px 14px !important;
  }

  /* ===== FORM RESET ===== */
  .ft-contact__formbox form,
  .ft-contact__formbox .ft-form,
  .ft-contact__formbox .ft-form__form{
    width:100% !important;
    max-width:100% !important;
    display:block !important;
    margin:0 !important;
  }

  .ft-contact__formbox .ft-form__field{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 12px !important;
    display:block !important;
  }

  /* labels */
  .ft-contact__formbox label,
  .ft-contact__formbox .ft-form__label{
    display:block !important;
    width:100% !important;
    text-align:right !important;
    font-size:16px !important;
    line-height:1.6 !important;
    margin:0 0 6px !important;
    color:#646464 !important;
    font-weight:700 !important;
  }

  /* inputs/textarea/button - اقفل أي ستايل من الثيم */
  .ft-contact__formbox input,
  .ft-contact__formbox textarea,
  .ft-contact__formbox button{
    appearance:none !important;
    -webkit-appearance:none !important;
    font-family:"Cairo", sans-serif !important;
    box-sizing:border-box !important;
    display:block !important;
    float:none !important;
    clear:both !important;
  }

  .ft-contact__formbox input[type="text"],
  .ft-contact__formbox input[type="tel"],
  .ft-contact__formbox input[type="email"],
  .ft-contact__formbox textarea{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    border-radius:6px !important;
    border:1px solid rgba(100,100,100,.5) !important;
    padding:10px 12px !important;
    font-size:14px !important;
    line-height:1.4 !important;
    background:#fff !important;
    color:#333 !important;
    margin:0 !important;
  }

  .ft-contact__formbox textarea{
    min-height:140px !important;
    resize:vertical !important;
  }

  .ft-contact__formbox .ft-form__submit,
  .ft-contact__formbox button[type="submit"]{
    width:100% !important;
    max-width:100% !important;
    height:52px !important;
    border-radius:10px !important;
    border:0 !important;
    margin-top:6px !important;
    font-size:16px !important;
    font-weight:800 !important;
    color:#fff !important;
    background:linear-gradient(85.19deg,#1076b4,#40aba7) !important;
  }

  /* ===== MAP ===== */
  .ft-contact__mapbox{
    min-height:320px !important;
    padding:10px !important;
    overflow:hidden !important;
    border-radius:10px !important;
  }
  .ft-contact__mapinner{
    width:100% !important;
    height:320px !important;
    border-radius:10px !important;
    overflow:hidden !important;
    background:rgba(255,255,255,.9) !important;
  }
  .ft-contact__mapinner iframe{
    width:100% !important;
    height:320px !important;
    min-height:320px !important;
    border:0 !important;
    display:block !important;
  }

}